<template>
	<view class="bgred pm30">

		<view class="">
			<image src="../../static/img/bjhsder.png" mode="widthFix" class="w100 cz"></image>
		</view>
		<view class="pd pt20">
			<view class="jmdfsdferte vertical-center b" @tap="dfdvxcer=true">
				点击邀请好友注册入职
			</view>
			<view class="mt30 dfgdxcxr">
				<swiper circular vertical class="w100 h100" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="w100 h100 vertical-center tl" v-for="sd in kmxzcxf">
						<view class="w100 cen">
							<view class="vcxvcxvrtrt">
								{{sd.msg}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>


			<view class="mt30">
				<view class="kxzczxcertxer pm20">
					<view class=" vertical-center">
						<view class="fz32 cf b xxcvdftrdr">
							我的邀请记录
						</view>
					</view>
					<view class="mt30 table w100 fz26 z6">
						<view class="trow">
							<view class="cell">
								注册人数
							</view>
							<view class="cell">
								有效注册人数
							</view>
							<view class="cell">
								获得奖励(元)
							</view>
						</view>
						<view class="trow b">
							<view class="cell pt20">
								{{jnxdrt.registerNum||0}}
							</view>
							<view class="cell pt20">
								{{jnxdrt.inviteUserNum||0}}
							</view>
							<view class="cell pt20">
								{{jnxdrt.amount||'0.00'}}
							</view>
						</view>
					</view>
				</view>
			</view>




			<view class="mt30">
				<view class="kxzczxcertxer pm20">
					<view class=" vertical-center">
						<view class="fz32 cf b xxcvdftrdr">
							邀请好有列表
						</view>
					</view>
					<view class="mt30 table w100 fz26 z6">
						<view class="trow">
							<view class="cell">
								手机号
							</view>
							<view class="cell">
								邀请时间
							</view>
							<view class="cell">
								有效注册
							</view>
							<view class="cell">
								红包发放
							</view>
						</view>
						<view class="trow b" v-for="sd in jnxdrt.inviteList">
							<view class="cell pt20 ">
								{{kxcxret(sd.mobile) }}
							</view>
							<view class="cell pt20">
								{{transferTimeYMD(sd.inviteTime)}}
							</view>
							<view class="cell pt20">
								{{sd.isRegist?"是":"否"}}
							</view>
							<view class="cell pt20">
								{{sd.amount||'--'}}
							</view>
						</view>
					</view>
					<view class="vertical-center mt100" v-if="!jnxdrt.inviteList">
							<image src="../../static/img/noData.png" class="xczxcertfdgtrr"></image>
							<view class="mt20 z9 fz24">
								暂无数据!
							</view>
					</view>
				</view>
			</view>

			<view class="mt30">
				<view class="kxzczxcertxer pm20">
					<view class=" vertical-center">
						<view class="fz32 cf b xxcvdftrdr">
							活动规则说明
						</view>
					</view>
					<view class="pd fz26 z9">
						<view class="mt20 display-flex">
							<view class="">
								<text class="xzcxsrtcr"></text>
							</view>
							<view class=" flex-1 ml10">
								<text class="fz30 b z3 b">奖励规则:</text> 邀请好友成功注册且客服专员回访成功，则邀请人与被邀请人均可获得随机红包(最高188元)

							</view>
						</view>
						<view class="mt20 display-flex">
							<view class="">
								<text class="xzcxsrtcr"></text>
							</view>
							<view class=" flex-1 ml10">
								<text class="fz30 b z3 b">有效邀请:</text> 被邀请用户完成注册后，客服人员电话回访，能够接通电话则视为邀请有效，否则视为邀请无效;
							</view>
						</view>
						<view class="mt20 display-flex">
							<view class="">
								<text class="xzcxsrtcr"></text>
							</view>
							<view class=" flex-1 ml10">
								<text class="fz30 b z3 b">奖励发放:</text> 邀请奖励审核通过后，即可在“我的余额”申请微信提现到账;
							</view>
						</view>
						<view class="mt20 display-flex">
							<view class="">
								<text class="xzcxsrtcr"></text>
							</view>
							<view class=" flex-1 ml10">
								<text class="fz30 b z3 b">奖励标准:</text>邀请奖励红包金额为随机金额，每成功邀请1人，则可获得1次红包奖励，名额有限抢完即止:
							</view>
						</view>
						<view class="mt20 display-flex">
							<view class="">
								<text class="xzcxsrtcr"></text>
							</view>
							<view class=" flex-1 ml10">
								<text class="fz30 b z3 b">郑重声明:</text>若发现任何违规情况，我司有权取消其参与资格;
							</view>
						</view>
						<view class="fz26 z9 mt30">
							注:本活动最终解释权归我司所有。
						</view>
					</view>
				</view>

			</view>

		</view>



	</view>

	<view class="kmxcxzdrserx vertical-bottom" v-if="dfdvxcer">
		<view class="bgff w100">
			<view class=" cen pt20 pm20 fz32">
				分享到
			</view>
			<view class="btm pt40">
				<view class="kxczxcser display-flex">
					<view class=" flex-1 cen pr">
						<view class="">
							<icon class="iconfont icon-weixin ls xczxsdreet"></icon>
						</view>
						<view class=" z9 fz28 mt10">
							微信
						</view>
						<button type="default" open-type="share" class="xzcxcfesrewr"></button>
					</view>
					<view class=" flex-1 cen" @tap="sjnxf">
						<view class="">
							<icon class="iconfont icon-yingxiaogongju-shoujihaibao ye xczxsdreet"></icon>
						</view>
						<view class=" z9 fz28 mt10">
							生成海报
						</view>
					</view>
				</view>
			</view>
			<view class="btm mt40 pt20 pm20 fz26 z9 cen" @tap="dfdvxcer=false">
				取消分享
			</view>
		</view>
	</view>


	<view class="lkxzcxzcrer vertical-center" v-if="kjjxczx">
		<view class="pr">
			<view class=" tr fdsfxtretre">
				<icon class="iconfont icon-14CIRCLE fz60 cf" @tap="kjjxczx=false"></icon>
			</view>
			<image
				:src="fzxdd"
				class="xczxcrtexzewr"></image>
			<view class="mt20">
				<button type="primary"
					@tap="kmnxcz(fzxdd)">
					<icon class="iconfont icon-xiazai cz fz40"></icon>
					<text class="fz32 cz ml20">保存图片</text>
				</button>
			</view>
		</view>
	</view>

</template>
<script lang="ts" setup>
	import { ref } from "vue"
	import { hf, caifen, VerifyTheLogin,dxrequest,transferTimeYMD,dxrequestht } from "@/util/index.js"
	import {
		onLoad,
		onPageScroll,
		onShow,
		onShareAppMessage,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	onShow(() => {
		VerifyTheLogin()
	})
	const jmxcxzf = ref({})
	const dfdvxcer = ref()
	const kjjxczx = ref();
	const jnxdrt = ref({})
	const kmxzcxf = ref([])
	const userId = uni.getStorageSync("userId")
	const fzxdd = ref()
	
	const sjnxf = async () => {
		uni.showLoading({
			title:"生成中..."
		})
		const { data } = await dxrequestht('https://duxinggj.com/xzzp/payment/zhipupdataxwertImg?userid=' + userId )
		let urlsd = `https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/case/%E8%96%AA%E6%99%BA%E7%9B%B4%E8%81%98/haibao2.html?qccode=${data}`
	
		urlsd = encodeURIComponent(urlsd)
	
		const kxcxre = await dxrequestht("https://duxinggj.com/util/exportjpg?url=" + urlsd + "&pageWidth=375&pageHeight=780")
		fzxdd.value = kxcxre.data
	
		uni.hideLoading()
		dfdvxcer.value = false
		kjjxczx.value = true
	
	}
	
	
	
	const kmnxcz = (url) => {
		uni.showLoading({
			title: "下载中"
		})
		uni.downloadFile({
			url, //仅为示例，并非真实的资源
			success: (res) => {
				if (res.statusCode === 200) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function () {
							uni.hideLoading()
							uni.showToast({
								title: "保存成功！"
							})
						}
					});
				}
			},
			complete: (data) => {
				console.log(data)
			}
		});
	}
	const inits = async()=>{
		const {data} = await dxrequest("/api/userinvite/pageList")
		jnxdrt.value = data
	}
	inits()
	const kmxcfdf= async()=>{
		const {data} = await dxrequest("/api/notice/page?page=1&type=5")
		kmxzcxf.value = data.list
			uni.stopPullDownRefresh();
	}
	kmxcfdf()
	
	onShareAppMessage(() => {
		return {
			title: '薪智直聘',
			path: '/pages/index/index?inviteUserId='+userId
		}
	})
	onPullDownRefresh(async()=>{
			await inits()
			await	kmxcfdf()
	})
	const kxcxret = (data)=>{
		try{
			data = ''+data
			return data.substr(7,11)
		}catch(e){
			
		}
	}
</script>

<style scoped>
	.jmdfsdferte {
		background: #ED7311;
		color: #fff;
		height: 90rpx;
		font-size: 44rpx;
		border-radius: 40rpx;
	}

	.dfgdxcxr {
		height: 60rpx;
	}

	.vcxvcxvrtrt {
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		display: inline-block;
		padding: 8rpx 20rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
	}

	.xczxcrtexzewr {
		width: 500rpx;
		height: 900rpx;
	}

	.kxzczxcertxer {
		background: #fff;
		border-radius: 8rpx;
	}

	.xxcvdftrdr {
		background: #ED7311;
		padding: 10rpx 40rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.xzcxsrtcr {
		display: inline-block;
		width: 14rpx;
		height: 14rpx;
		background: #ED7311;
		transform: rotate(45deg);
	}
</style>